<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Layui页面构造工具</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body class="layui-card-body">

<div class="layui-row layui-col-space10">
    <div class="layui-col-xs3 element-container layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">表单</li>
            <li>布局</li>
            <li>菜单</li>
            <li>按钮</li>
            <li>表格</li>
            <li>分页</li>
            <li>辅助</li>
            <li>时间线</li>
            <li>进度条</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item form-item layui-show layui-card-body">
<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">单行输入</label>
    <div class="layui-input-block">
        <input type="text" name="inline" placeholder="请输入内容" class="layui-input">
    </div>
</div>

<div class="layui-form-item layui-form">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-delete"></i>
        <label class="layui-form-label">范围输入</label>
        <div class="layui-input-inline" style="width: calc(50% - 75px);">
            <input type="text" name="min" placeholder="低限" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: calc(50% - 75px);">
            <input type="text" name="max" placeholder="高限" class="layui-input">
        </div>
    </div>
</div>

<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">下拉选择</label>
    <div class="layui-input-block">
        <select name="select" lay-filter="select-filter" lay-search>
            <option value="">选择下拉项</option>
            <option value="1">写作</option>
            <option value="2">音乐</option>
            <option value="3">旅行</option>
        </select>
    </div>
</div>

<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">分组下拉</label>
    <div class="layui-input-block">
        <select name="group-select" lay-filter="group-select-filter" lay-search>
            <option value="">选择分组下拉项</option>
            <optgroup label="京津冀">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="hb">河北</option>
            </optgroup>
            <optgroup label="江浙沪">
                <option value="js">江苏</option>
                <option value="zh">浙江</option>
                <option value="sh">上海</option>
            </optgroup>
        </select>
    </div>
</div>

<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
        <input type="checkbox" name="checkbox[0]" title="选项1">
        <input type="checkbox" name="checkbox[1]" title="选项2" checked>
    </div>
</div>

<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">标签框</label>
    <div class="layui-input-block">
        <input type="checkbox" name="tag[0]" lay-skin="tag" title="选项1" checked>
        <input type="checkbox" name="tag[1]" lay-skin="tag" title="选项2">
    </div>
</div>

<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch" title="开|关">
    </div>
</div>

<div class="layui-form-item layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
        <input type="radio" name="radio" value="男" title="男" checked>
        <input type="radio" name="radio" value="女" title="女">
        <input type="radio" name="radio" value="禁" title="禁用" disabled>
    </div>
</div>

<div class="layui-form-item layui-form layui-form-text">
    <i class="layui-icon layui-icon-delete"></i>
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
        <textarea name="text" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
</div>

<div class="layui-form layui-row layui-col-space5">
    <div class="layui-col-sm3">
        <i class="layui-icon layui-icon-delete"></i>
        <input type="text" name="A" placeholder="姓名" class="layui-input">
    </div>
    <div class="layui-col-sm3">
        <div class="layui-input-wrap">
            <input type="text" name="B" placeholder="性别" class="layui-input">
        </div>
    </div>
    <div class="layui-col-sm3">
        <input type="text" name="C" placeholder="年龄" class="layui-input">
    </div>
    <div class="layui-col-sm3">
        <input type="text" name="D" placeholder="职业" class="layui-input">
    </div>
</div>

<br/>

<div class="layui-form layui-row layui-col-space5">
    <div class="layui-col-md6">
        <i class="layui-icon layui-icon-delete"></i>
        <div class="layui-form-item" style="margin-bottom: 0;">
            <label class="layui-form-label">注册地址</label>
            <div class="layui-input-block">
                <input type="text" name="reg" placeholder="请输入" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-form-item" style="margin-bottom: 0;">
            <label class="layui-form-label">所属省份</label>
            <div class="layui-input-block">
                <select name="province">
                    <option value="">省份</option>
                    <option value="浙江">浙江省</option>
                    <option value="江西">江西省</option>
                    <option value="福建">福建省</option>
                </select>
            </div>
        </div>
    </div>
</div>

<br/>

<div class="layui-form layui-row layui-col-space5">
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <i class="layui-icon layui-icon-delete"></i>
            <div class="layui-input-prefix">

                <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="user" placeholder="前缀图标" class="layui-input"
                   lay-affix="clear">
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <input type="text" name="detail" placeholder="后缀图标"
                   class="layui-input">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-more-vertical"></i>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
            </div>
            <input type="text" name="ba" placeholder="前后图标" class="layui-input">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-down"></i>
            </div>
        </div>
    </div>
</div>
            </div>
            <div class="layui-tab-item">
<div class="layui-row layui-form">
    <div class="layui-col-xs6">
        <i class="layui-icon layui-icon-delete"></i>
        <div class="grid-demo">6/12</div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">6/12</div>
    </div>
</div>

<br/>

<div class="layui-row layui-form">
    <div class="layui-col-xs4">
        <i class="layui-icon layui-icon-delete"></i>
        <div class="grid-demo">4/12</div>
    </div>
    <div class="layui-col-xs4">
        <div class="grid-demo">4/12</div>
    </div>
    <div class="layui-col-xs4">
        <div class="grid-demo">4/12</div>
    </div>
</div>

<br/>

<div class="layui-row layui-form">
    <div class="layui-col-xs3">
        <i class="layui-icon layui-icon-delete"></i>
        <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
</div>

<div class="layui-tab layui-tab-brief layui-form">
    <ul class="layui-tab-title">
        <li class="layui-this"><i class="layui-icon layui-icon-delete"></i>标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容-1</div>
        <div class="layui-tab-item">内容-2</div>
        <div class="layui-tab-item">内容-3</div>
    </div>
</div>

<div class="layui-tab layui-tab-card layui-form">
    <ul class="layui-tab-title">
        <li class="layui-this"><i class="layui-icon layui-icon-delete"></i>标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容-1</div>
        <div class="layui-tab-item">内容-2</div>
        <div class="layui-tab-item">内容-3</div>
    </div>
</div>

<div class="layui-tab layui-form" lay-allowclose="true">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="11"><i class="layui-icon layui-icon-delete"></i>标签1</li>
        <li lay-id="22">标签2</li>
        <li lay-id="33">标签3</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容-1</div>
        <div class="layui-tab-item">内容-2</div>
        <div class="layui-tab-item">内容-3</div>
    </div>
</div>

<div class="layui-collapse layui-form" lay-accordion>
    <div class="layui-colla-item">
        <div class="layui-colla-title">
            <i class="layui-icon layui-icon-delete"></i>
            Collapse Title 1
        </div>
        <div class="layui-colla-content">
            <p>Content 1</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <div class="layui-colla-title">Collapse Title 2</div>
        <div class="layui-colla-content">
            <p>Content 2</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <div class="layui-colla-title">Collapse Title 3</div>
        <div class="layui-colla-content">
            <ul>
                <li>Content list</li>
                <li>Content list</li>
            </ul>
        </div>
    </div>
</div>

<br/>

<div class="layui-panel layui-form">
    <div style="padding: 32px;"><i class="layui-icon layui-icon-delete"></i>面板任意内容</div>
</div>

<br/>

<div class="layui-bg-gray layui-form" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="layui-icon layui-icon-delete"></i>
                    卡片面板
                </div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
            <div class="layui-tab-item">
<ul class="layui-nav layui-form">
    <li class="layui-nav-item layui-this"><i class="layui-icon layui-icon-delete"></i><a
            href="javascript:;">选中</a>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">常规</a>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">子级</a>
        <dl class="layui-nav-child">
            <dd><a href="">菜单1</a></dd>
            <dd><a href="">菜单2</a></dd>
            <dd><a href="">菜单3</a></dd>
        </dl>
    </li>
</ul>

<br/>

<ul class="layui-nav layui-form">
    <li class="layui-nav-item">
        <i class="layui-icon layui-icon-delete"></i>
        <a href="javascript:;">带徽章<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">小圆点<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" lay-unselect>
        <a href="javascript:;">
            <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
        </a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">子级菜单</a></dd>
            <dd><a href="javascript:;">横线隔断</a></dd>
            <hr>
            <dd style="text-align: center;"><a href="">退出</a></dd>
        </dl>
    </li>
</ul>

<br/>

<ul class="layui-nav layui-nav-tree layui-form">
    <li class="layui-nav-item layui-nav-itemed">
        <i class="layui-icon layui-icon-delete"></i>
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">默认收缩</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
    <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
</ul>

<div class="layui-panel layui-form" style="width: 260px; margin-top: 16px;">
    <ul class="layui-menu" id="demo-menu">
        <li lay-options="{id: 100}">
            <div class="layui-menu-body-title"><i class="layui-icon layui-icon-delete"></i><a
                    href="javascript:;">menu item 1</a></div>
        </li>
        <li lay-options="{id: 101}">
            <div class="layui-menu-body-title">
                <a href="javascript:;">menu item 2 <span class="layui-badge-dot"></span></a>
            </div>
        </li>
        <li class="layui-menu-item-divider"></li>
        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
            <div class="layui-menu-body-title">
                menu group <i class="layui-icon layui-icon-up"></i>
            </div>
            <ul>
                <li lay-options="{id: 103}">
                    <div class="layui-menu-body-title">menu item 3-1</div>
                </li>
                <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                    <div class="layui-menu-body-title">menu group 2</div>
                    <ul>
                        <li class="layui-menu-item-checked">
                            <div class="layui-menu-body-title">menu item 3-2-1</div>
                        </li>
                        <li>
                            <div class="layui-menu-body-title">menu item 3-2-2</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="layui-menu-body-title">menu item 3-3</div>
                </li>
            </ul>
        </li>
        <li class="layui-menu-item-divider"></li>
        <li>
            <div class="layui-menu-body-title">menu item 4 <span class="layui-badge">1</span></div>
        </li>
        <li>
            <div class="layui-menu-body-title">menu item 5</div>
        </li>
        <li>
            <div class="layui-menu-body-title">menu item 6</div>
        </li>
        <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
            <div class="layui-menu-body-title">
                menu item 7 Children
                <i class="layui-icon layui-icon-right"></i>
            </div>
            <div class="layui-panel layui-menu-body-panel">
                <ul>
                    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                        <div class="layui-menu-body-title">
                            menu item 7-1
                            <i class="layui-icon layui-icon-right"></i>
                        </div>
                        <div class="layui-panel layui-menu-body-panel">
                            <ul>
                                <li>
                                    <div class="layui-menu-body-title">menu item 7-2-1</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">menu item 7-2-2</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">menu item 7-2-3</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">menu item 7-2-4</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="layui-menu-body-title">menu item 7-2</div>
                    </li>
                    <li>
                        <div class="layui-menu-body-title">menu item 7-3</div>
                    </li>
                </ul>
            </div>
        </li>
        <li>menu item 8</li>
        <li class="layui-menu-item-divider"></li>
        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
            <div class="layui-menu-body-title">menu group 9</div>
            <ul>
                <li>
                    <div class="layui-menu-body-title">menu item 9-1</div>
                </li>
                <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                    <div class="layui-menu-body-title">
                        menu item 9-2
                        <i class="layui-icon layui-icon-right"></i>
                    </div>
                    <div class="layui-panel layui-menu-body-panel">
                        <ul>
                            <li>
                                <div class="layui-menu-body-title">menu item 9-2-1</div>
                            </li>
                            <li>
                                <div class="layui-menu-body-title">menu item 9-2-2</div>
                            </li>
                            <li>
                                <div class="layui-menu-body-title">menu item 9-2-3</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="layui-menu-body-title">menu item 9-31</div>
                </li>
            </ul>
        </li>
        <li class="layui-menu-item-divider"></li>
        <li>
            <div class="layui-menu-body-title">menu item 10</div>
        </li>
    </ul>
</div>
            </div>
            <div class="layui-tab-item layui-btn-container">
<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i>默认按钮
</button>
<button type="button" class="layui-btn layui-bg-blue layui-form">
    <i class="layui-icon layui-icon-delete"></i>蓝色按钮
</button>
<button type="button" class="layui-btn layui-bg-orange layui-form">
    <i class="layui-icon layui-icon-delete"></i>橙色按钮
</button>
<button type="button" class="layui-btn layui-bg-red layui-form">
    <i class="layui-icon layui-icon-delete"></i>红色按钮
</button>
<button type="button" class="layui-btn layui-bg-purple layui-form">
    <i class="layui-icon layui-icon-delete"></i>紫色按钮
</button>
<button type="button" class="layui-btn layui-btn-disabled layui-form">
    <i class="layui-icon layui-icon-delete"></i>禁用按钮
</button>

<br/>

<button class="layui-btn layui-btn-primary layui-border-green layui-form">
    <i class="layui-icon layui-icon-delete"></i>主色按钮
</button>
<button class="layui-btn layui-btn-primary layui-border-blue layui-form">
    <i class="layui-icon layui-icon-delete"></i>蓝色按钮
</button>
<button class="layui-btn layui-btn-primary layui-border-orange layui-form">
    <i class="layui-icon layui-icon-delete"></i>橙色按钮
</button>
<button class="layui-btn layui-btn-primary layui-border-red layui-form">
    <i class="layui-icon layui-icon-delete"></i>红色按钮
</button>
<button class="layui-btn layui-btn-primary layui-border-purple layui-form">
    <i class="layui-icon layui-icon-delete"></i>紫色按钮
</button>
<button class="layui-btn layui-btn-primary layui-border layui-form">
    <i class="layui-icon layui-icon-delete"></i>普通按钮
</button>

<br/>

<button type="button" class="layui-btn layui-btn-lg layui-form">
    <i class="layui-icon layui-icon-delete"></i>大型按钮
</button>
<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i>默认按钮
</button>
<button type="button" class="layui-btn layui-btn-sm layui-form">
    <i class="layui-icon layui-icon-delete"></i>小型按钮
</button>
<button type="button" class="layui-btn layui-btn-xs layui-form">
    <i class="layui-icon layui-icon-delete"></i>迷你按钮
</button>

<br/>

<button type="button" class="layui-btn layui-btn-lg layui-btn-normal layui-form">
    <i class="layui-icon layui-icon-delete"></i>大型按钮
</button>
<button type="button" class="layui-btn layui-btn-normal layui-form">
    <i class="layui-icon layui-icon-delete"></i>默认按钮
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-form">
    <i class="layui-icon layui-icon-delete"></i>小型按钮
</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-form">
    <i class="layui-icon layui-icon-delete"></i>迷你按钮
</button>

<br/>

<button type="button" class="layui-btn layui-btn-primary layui-btn-lg layui-form">
    <i class="layui-icon layui-icon-delete"></i>大型按钮
</button>
<button type="button" class="layui-btn layui-btn-primary layui-form">
    <i class="layui-icon layui-icon-delete"></i>默认按钮
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm layui-form">
    <i class="layui-icon layui-icon-delete"></i>小型按钮
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs layui-form">
    <i class="layui-icon layui-icon-delete"></i>迷你按钮
</button>

<br/>

<button type="button" class="layui-btn layui-btn-fluid layui-form"><i
        class="layui-icon layui-icon-delete"></i>流体按钮（宽度自适应）
</button>

<br/>

<button type="button" class="layui-btn layui-btn-primary layui-btn-radius layui-form"><i
        class="layui-icon layui-icon-delete"></i>原始按钮
</button>
<button type="button" class="layui-btn layui-btn-radius layui-form"><i
        class="layui-icon layui-icon-delete"></i>默认按钮
</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius layui-form"><i
        class="layui-icon layui-icon-delete"></i>百搭按钮
</button>

<br/>

<button type="button" class="layui-btn layui-btn-warm layui-btn-radius layui-form"><i
        class="layui-icon layui-icon-delete"></i>暖色按钮
</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius layui-form"><i
        class="layui-icon layui-icon-delete"></i>警告按钮
</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius layui-form">
    <i class="layui-icon layui-icon-delete"></i>禁用按钮
</button>

<br/>

<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i> 按钮
    <i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-left"></i>
</button>
<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-right"></i>
</button>
<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-edit"></i>
</button>
<button type="button" class="layui-btn layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-share"></i>
</button>

<br/>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-left"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-right"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-edit"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon">&#xe640;</i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-share"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-disabled layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon">&#xe640;</i>
</button>

<br/>

<button type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-left"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-right"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-edit"></i>
</button>

<br/>

<button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius layui-form">
    <i class="layui-icon layui-icon-delete"></i>大型加圆角
</button>
<span class="layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <a href="/" class="layui-btn" target="_blank">跳转的按钮</a>
</span>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon">&#xe640;</i> 删除
</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <i class="layui-icon layui-icon-share"></i> 分享
</button>

<br/>

<div class="layui-btn-group layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>

<div class="layui-btn-group layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-add-1"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-right"></i>
    </button>
</div>

<div class="layui-btn-group layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-add-1"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
</div>

<div class="layui-btn-container layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <button type="button" class="layui-btn">按钮一</button>
    <button type="button" class="layui-btn">按钮二</button>
    <button type="button" class="layui-btn">按钮三</button>
</div>
            </div>
            <div class="layui-tab-item">
<table class="layui-table layui-form">
    <colgroup>
        <col width="70">
        <col width="70">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    </tbody>
</table>
行边框表格:
<table class="layui-table layui-form" lay-skin="line">
    <colgroup>
        <col width="70">
        <col width="70">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    </tbody>
</table>
列边框表格:
<table class="layui-table layui-form" lay-skin="row">
    <colgroup>
        <col width="70">
        <col width="70">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    </tbody>
</table>
无边框表格:
<table class="layui-table layui-form" lay-skin="nob">
    <colgroup>
        <col width="70">
        <col width="70">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    </tbody>
</table>
小尺寸表格:
<table class="layui-table layui-form" lay-size="sm">
    <colgroup>
        <col width="70">
        <col width="70">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    </tbody>
</table>
大尺寸表格:
<table class="layui-table layui-form" lay-size="lg">
    <colgroup>
        <col width="90">
        <col width="90">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    </tbody>
</table>
开启偶数行背景色:
<table class="layui-table layui-form" lay-even>
    <colgroup>
        <col width="70">
        <col width="70">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th><i class="layui-icon layui-icon-delete"></i>人物</th>
        <th>民族</th>
        <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>孔子</td>
        <td>华夏</td>
        <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
        <td>孟子</td>
        <td>华夏</td>
        <td>穷则独善其身，达则兼济天下</td>
    </tr>
    <tr>
        <td>庄子</td>
        <td>华夏</td>
        <td>朴素而天下莫能与之争美</td>
    </tr>
    </tbody>
</table>
表格选中行：
<table class="layui-hide layui-form" id="checked-row-table-demo"></table>
<script type="text/html" id="checked-row-table-demo-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    </div>
</script>
树形表格：
<table class="layui-hide layui-form" id="tree-table-demo"></table>
<script type="text/html" id="tree-table-demo-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
    </div>
</script>
<script type="text/html" id="tree-table-demo-tools">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
    </div>
</script>
            </div>
            <div class="layui-tab-item">
<div class="layui-box layui-laypage layui-laypage-default layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <a class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a data-page="2">2</a>
    <a data-page="3">3</a>
    <a data-page="4">4</a>
    <a data-page="5">5</a>
    <a class="layui-laypage-next" data-page="2">下一页</a>
</div>

<div class="layui-box layui-laypage layui-laypage-default layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <a class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a data-page="2">2</a>
    <a data-page="3">3</a>
    <a data-page="4">4</a>
    <a data-page="5">5</a>
    <span class="layui-laypage-spr">…</span>
    <a class="layui-laypage-last" title="尾页" data-page="10">10</a>
    <a class="layui-laypage-next" data-page="2">下一页</a>
</div>

<div class="layui-box layui-laypage layui-laypage-default layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <a class="layui-laypage-prev layui-disabled" data-page="0">
        <em>←</em>
    </a>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a data-page="2">2</a>
    <a data-page="3">3</a>
    <a data-page="4">4</a>
    <a data-page="5">5</a>
    <span class="layui-laypage-spr">…</span>
    <a class="layui-laypage-last" title="尾页" data-page="10">尾页</a>
    <a class="layui-laypage-next" data-page="2">
        <em>→</em>
    </a>
</div>

<div class="layui-box layui-laypage layui-laypage-default layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a data-page="2">2</a>
    <a data-page="3">3</a>
    <a data-page="4">4</a>
    <a data-page="5">5</a>
    <span class="layui-laypage-spr">…</span>
    <a class="layui-laypage-last" title="尾页" data-page="10">10</a>
</div>

<div class="layui-box layui-laypage layui-laypage-default layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <a class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a class="layui-laypage-next" data-page="2">下一页</a>
</div>

<div class="layui-box layui-laypage layui-laypage-default layui-form">
    <i class="layui-icon layui-icon-delete"></i>
    <a class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a data-page="2">2</a>
    <a data-page="3">3</a>
    <a data-page="4">4</a>
    <a data-page="5">5</a>
    <span class="layui-laypage-spr">…</span>
    <a class="layui-laypage-last" title="尾页" data-page="10">10</a>
    <a class="layui-laypage-next" data-page="2">下一页</a>
    <span class="layui-laypage-limits">
        <select lay-ignore="">
            <option value="100" selected="">100 条/页</option>
            <option value="300">300 条/页</option>
            <option value="500">500 条/页</option>
        </select>
    </span>
</div>
            </div>
            <div class="layui-tab-item">
<blockquote class="layui-elem-quote layui-form">
    <i class="layui-icon layui-icon-delete"></i>引用内容，默认风格
</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm layui-form">
    <i class="layui-icon layui-icon-delete"></i>引用内容，边框风格
</blockquote>

<fieldset class="layui-elem-field layui-form">
    <legend><i class="layui-icon layui-icon-delete"></i>标题</legend>
    <div class="layui-field-box">
        任意内容
    </div>
</fieldset>

<div class="layui-form">
    <fieldset class="layui-elem-field layui-field-title">
        <legend><i class="layui-icon layui-icon-delete"></i>仅显示标题水平线</legend>
    </fieldset>
    内容写在外面
</div>

默认分割线
<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr/>
</div>

赤色分割线

<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr class="layui-border-red">
</div>

橙色分割线
<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr class="layui-border-orange">
</div>

墨绿分割线
<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr class="layui-border-green">
</div>

青色分割线
<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr class="layui-border-cyan">
</div>

蓝色分割线
<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr class="layui-border-blue">
</div>

深色分割线
<div class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <hr class="layui-border-black">
</div>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge">6</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge">99</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge">61728</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge">赤</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge layui-bg-orange">橙</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge layui-bg-green">绿</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge layui-bg-cyan">青</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge layui-bg-blue">蓝</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge layui-bg-black">深</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge layui-bg-gray">浅</span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot layui-bg-orange"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot layui-bg-green"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot layui-bg-cyan"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot layui-bg-blue"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot layui-bg-black"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <span class="layui-badge-dot layui-bg-gray"></span>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
<button class="layui-btn">
    按钮甲
    <span class="layui-badge layui-bg-gray">1</span>
</button>
</span>

<span class="layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
<button class="layui-btn">
    按钮乙
    <span class="layui-badge-dot layui-bg-orange"></span>
</button></span>
            </div>
            <div class="layui-tab-item">
<div class="layui-timeline layui-form">
    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">
                <i class="layui-icon layui-icon-delete"></i>8月18日
            </h3>
            <p>
                Layui 2.0 的发布前夜，记录着这样的一段心理活动。
            </p>
        </div>
    </div>
    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月16日</h3>
            <p>Layui 使用率最高的组件有</p>
            <ul>
                <li>table</li>
                <li>form</li>
            </ul>
        </div>
    </div>
</div>

<br/>

<div class="layui-timeline layui-form">
    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">
                <i class="layui-icon layui-icon-delete"></i>新官网上线，且文档全部重写并开源。
            </div>
        </div>
    </div>
    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis layui-icon-face-cry"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">
                Layui 原官网下线，此后 Layui 进入两年的低谷期。
            </div>
        </div>
    </div>
    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis layui-icon-fire"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">
                Layui 里程碑版本 2.0.0 发布，此后 Layui 进入三年的高光期。
            </div>
        </div>
    </div>
    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">
                2016年，Layui 首个版本发布
            </div>
        </div>
    </div>
    <div class="layui-timeline-item">
        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">
                最初，Layui 在爱与期许中孵化。
            </div>
        </div>
    </div>
</div>
            </div>
            <div class="layui-tab-item">
<div class="layui-progress layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar" lay-percent="30%"></div>
</div>

<br/>

<div class="layui-progress layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar" lay-percent="50%"></div>
</div>

<br/>

<div class="layui-progress layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
</div>

<br/>

<div class="layui-progress layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>

<br/>

<div class="layui-progress layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar layui-bg-blue" lay-percent="60%"></div>
</div>

<br/>

<div class="layui-progress layui-progress-big layui-form inline-delete">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar" lay-percent="15%"></div>
</div>

<br/>

<div class="layui-progress layui-progress-big layui-form inline-delete" lay-showpercent="true">
    <i class="layui-icon layui-icon-delete"></i>
    <div class="layui-progress-bar" lay-percent="70%"></div>
</div>
            </div>
        </div>
    </div>

    <div class="layui-col-xs6 priview-container"></div>
    <div class="layui-col-xs3 property-container"></div>
</div>
<script src="layui/layui.js"></script>
<script src="js/index.js"></script>
</body>
</html>